<template>
  <div class="mmap">
    <div class="map" id="container" :style="styles"></div>
  </div>
</template>

<script>
export default {
  name: "mMap",
  props:['width','height'],
  data() {
    return {
      lng: null,
      lat: null,
      styles: 'margin: auto;width: '+this.width+'px;height: '+this.height+'px;'
    }
  },
  methods: {
    createMap() {
      this.$amap = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
      });

      this.$amap.on("click", this.showInfoClick);
    },
    addMarker(lnglats) {
      if (this.marker) {
        this.$amap.remove(this.marker);
      }
      this.marker = new AMap.Marker({
        position: lnglats,
        map: this.$amap
      });
    },
    showInfoClick(e) {
      // 经度纬度
      const lnglats = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.lng = e.lnglat.getLng();
      this.lat = e.lnglat.getLat();
      console.log("经度" + e.lnglat.getLng())
      console.log("纬度" + e.lnglat.getLat())
      // 添加marker
      this.addMarker(lnglats);
    }
  },
  mounted() {
    this.createMap();
  },
  beforeDestory() {
    this.$amap && this.$amap.destory();
  },
}
</script>

<style lang="less">
.mmap {
  //#container {
  //  margin: auto;
  //  width: 375px;
  //  height: 375px;
  //}
}

</style>